<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Filters</title>
  </head>
  <body>
    <!-- Blur -->
    <div class="div p-5 blur-sm">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero temporibus
      quam placeat veritatis quae aperiam illum nobis accusamus quisquam autem
      consectetur, dolor ad architecto amet explicabo soluta repellat. Quo,
      velit.
    </div>

    <div class="div p-5 blur">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero temporibus
      quam placeat veritatis quae aperiam illum nobis accusamus quisquam autem
      consectetur, dolor ad architecto amet explicabo soluta repellat. Quo,
      velit.
    </div>
    <img class="blur-sm" src="https://picsum.photos/600/400" alt="" />

    <!-- brightness -->
    <img class="brightness" src="https://picsum.photos/600/400" alt="" />
    <img class="brightness-100" src="https://picsum.photos/600/400" alt="" />
    <img class="brightness-125" src="https://picsum.photos/600/400" alt="" />
    <img class="brightness-200" src="https://picsum.photos/600/400" alt="" />
    <!-- Contrast -->
    <img class="contrast" src="https://picsum.photos/600/400" alt="" />
    <img class="contrast-50" src="https://picsum.photos/600/400" alt="" />
    <img class="contrast-100" src="https://picsum.photos/600/400" alt="" />
    <img class="contrast-150" src="https://picsum.photos/600/400" alt="" />
    <img class="contrast-200" src="https://picsum.photos/600/400" alt="" />

    <!-- Grayscale -->
    <img class="grayscale" src="https://picsum.photos/600/400" alt="" />
    <!-- Invert -->
    <img class="invert" src="https://picsum.photos/600/400" alt="" />
    <!-- Sepia -->
    <img class="sepia" src="https://picsum.photos/600/400" alt="" />
    <!-- Hue Rotate -->
     <img class="hue-rotate-15" src="https://picsum.photos/600/400" alt="" />
     <img class="hue-rotate-60" src="https://picsum.photos/600/400" alt="" />
     <img class="hue-rotate-90" src="https://picsum.photos/600/400" alt="" />
     <img class="hue-rotate-180" src="https://picsum.photos/600/400" alt="" />
  </body>
</html>

<!-- Blur
  blur-none	    filter: blur(0);
  blur-sm	      filter: blur(4px);
  blur	        filter: blur(8px);
  blur-md	      filter: blur(12px);
  blur-lg	      filter: blur(16px);
  blur-xl	      filter: blur(24px);
  blur-2xl	    filter: blur(40px);
  blur-3xl	    filter: blur(64px);
-->

<!-- Brightness
  brightness-0	    filter: brightness(0);
  brightness-50	    filter: brightness(.5);
  brightness-75	    filter: brightness(.75);
  brightness-90	    filter: brightness(.9);
  brightness-95	    filter: brightness(.95);
  brightness-100	  filter: brightness(1);
  brightness-105	  filter: brightness(1.05);
  brightness-110	  filter: brightness(1.1);
  brightness-125	  filter: brightness(1.25);
  brightness-150	  filter: brightness(1.5);
  brightness-200	  filter: brightness(2);
-->

<!-- Contrast
  contrast-0	  filter: contrast(0);
  contrast-50	  filter: contrast(.5);
  contrast-75	  filter: contrast(.75);
  contrast-100	filter: contrast(1);
  contrast-125	filter: contrast(1.25);
  contrast-150	filter: contrast(1.5);
  contrast-200	filter: contrast(2);
-->

<!-- Hue Rotate
  hue-rotate-0	    filter: hue-rotate(0deg);
  hue-rotate-15	    filter: hue-rotate(15deg);
  hue-rotate-30	    filter: hue-rotate(30deg);
  hue-rotate-60	    filter: hue-rotate(60deg);
  hue-rotate-90	    filter: hue-rotate(90deg);
  hue-rotate-180	  filter: hue-rotate(180deg);
-->
